<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:component="http://java.sun.com/jsf/composite/component"
                template="/templates/template.xhtml">

    <ui:define name="title">功能权限</ui:define>
    <ui:define name="content">
        <h:form>
            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar>
                    <f:facet name="left">
                        <p:commandButton value="关联用户" icon="fa fa-users"
                                         actionListener="#{functionalPermissionBean.onChangeUserMode}"
                                         rendered="#{functionalPermissionBean.$ != null}"
                                         process="@this"
                                         update="@form"/>
                        <p:commandButton value="关联角色" icon="fa fa-graduation-cap"
                                         actionListener="#{functionalPermissionBean.onChangeRoleMode}"
                                         rendered="#{functionalPermissionBean.$ != null}"
                                         process="@this"
                                         update="@form"/>
                        <p:commandButton value="生成常用权限" icon="fa fa-forward"
                                         actionListener="#{functionalPermissionBean.onGenerateFrequentMenu}"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null}"
                                         process="@this"
                                         update="@form"/>
                    </f:facet>
                    <f:facet name="right">
                        <p:commandButton value="查询" icon="fa fa-search"
                                         rendered="#{functionalPermissionBean.relationType == 'USER' or functionalPermissionBean.relationType == 'ROLE'}"
                                         update="@form"/>
                        <p:commandButton value="启用" icon="fa fa-play"
                                         actionListener="#{functionalPermissionBean.onEnable}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null and !functionalPermissionBean.$.enable and functionalPermissionBean.isView()}"/>
                        <p:commandButton value="禁用" icon="fa fa-warning"
                                         actionListener="#{functionalPermissionBean.onDisable}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null and functionalPermissionBean.$.enable and functionalPermissionBean.isView()}"/>
                        <p:commandButton value="删除" icon="fa fa-remove"
                                         actionListener="#{functionalPermissionBean.onDelete}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null and functionalPermissionBean.isView()}">
                            <p:confirm header="提示信息" message="删除节点将一并删除其下子节点,是否确定删除?" icon="ui-icon-alert"/>
                        </p:commandButton>
                        <p:commandButton value="编辑" icon="fa fa-edit"
                                         actionListener="#{functionalPermissionBean.changeStatusToEdit}"
                                         process="@this"
                                         update="@form"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null and functionalPermissionBean.isView()}"/>
                        <p:commandButton value="保存" icon="fa fa-save"
                                         actionListener="#{functionalPermissionBean.onSavePermission}"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null and functionalPermissionBean.isNotView()}"
                                         update="@form"/>
                        <p:commandButton value="取消" icon="fa fa-reply"
                                         actionListener="#{functionalPermissionBean.onCancel}"
                                         rendered="#{functionalPermissionBean.isNotView()}"
                                         process="@this"
                                         update="@form"/>
                        <p:commandButton value="新增" icon="fa fa-plus"
                                         actionListener="#{functionalPermissionBean.onAddPermission}"
                                         rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.isView()}"
                                         update="@form"/>
                    </f:facet>
                </p:toolbar>
            </div>
            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g-4">
                    <div class="card">
                        <h1>功能权限</h1>
                        <p:tree value="#{functionalPermissionBean.root}" var="node"
                                dynamic="true"
                                selectionMode="single" selection="#{functionalPermissionBean.selectedNode}"
                                animate="true"
                                expanded="true"
                                draggable="true"
                                droppable="true"
                                filterBy="#{node.name}"
                                filterMatchMode="contains">

                            <p:ajax event="select" update="@form" listener="#{functionalPermissionBean.onSelectNode}"/>
                            <p:ajax event="dragdrop" listener="#{functionalPermissionBean.onMovePermission}"
                                    update="@form"/>

                            <p:treeNode icon="#{node.icon}">
                                <h:outputText value="#{node.name}(启用)" rendered="#{node.enable}"/>
                                <h:outputText value="#{node.name}(禁用)" style="color: red" rendered="#{!node.enable}"/>
                            </p:treeNode>
                        </p:tree>
                    </div>
                </div>
                <h:panelGroup
                        rendered="#{functionalPermissionBean.relationType == null and functionalPermissionBean.$ != null}">
                    <div class="ui-g-8">
                        <div class="card">
                            <h1>功能权限信息</h1>
                            <p:panelGrid columns="2"
                                         columnClasses="ui-grid-col-2,ui-grid-col-10"
                                         layout="grid" styleClass="ui-panelgrid-blank"
                                         style="border:0px none; background-color:transparent;">

                                <p:outputLabel for="code" value="权限编码"/>
                                <p:inputText id="code" value="#{functionalPermissionBean.$.code}"
                                             disabled="#{functionalPermissionBean.isView()}"/>

                                <p:outputLabel for="name" value="权限名称"/>
                                <p:inputText id="name" value="#{functionalPermissionBean.$.name}"
                                             disabled="#{functionalPermissionBean.isView()}"/>

                                <p:outputLabel for="interceptUrl" value="拦截路径"/>
                                <p:inputText id="interceptUrl" value="#{functionalPermissionBean.$.interceptUrl}"
                                             disabled="#{functionalPermissionBean.isView()}"/>

                                <p:outputLabel for="remark" value="备注"/>
                                <p:inputTextarea id="remark"
                                                 value="#{functionalPermissionBean.$.remark}"
                                                 disabled="#{functionalPermissionBean.isView()}"/>

                                <p:outputLabel for="enable" value="是否启用"/>
                                <p:inputSwitch id="enable" onLabel="是" offLabel="否"
                                               value="#{functionalPermissionBean.$.enable}"
                                               disabled="#{functionalPermissionBean.isView()}"/>

                            </p:panelGrid>
                        </div>
                    </div>
                </h:panelGroup>
            </div>

            <component:permission-user
                    searchConditionName="#{functionalPermissionBean.userSearchRequest.name}"
                    searchConditionAccount="#{functionalPermissionBean.userSearchRequest.account}"
                    searchConditionEmail="#{functionalPermissionBean.userSearchRequest.email}"
                    searchConditionPhone="#{functionalPermissionBean.userSearchRequest.phone}"
                    searchConditionEnable="#{functionalPermissionBean.userSearchRequest.enable}"
                    panelGroupRendered="#{functionalPermissionBean.relationType == 'USER'}"
                    lazyDataModel="#{functionalPermissionBean.userLazyDataModel}"
                    relateActionListener="#{functionalPermissionBean.onRelateUser(user.id)}"
                    unrelateActionListener="#{functionalPermissionBean.onUnrelateUser(user.id)}"
                    relateButtonRendered="#{!user.relatedFunctionalPermission}"
                    unrelateButtonRendered="#{user.relatedFunctionalPermission}"/>


            <component:permission-role
                    searchConditionCode="#{functionalPermissionBean.roleSearchRequest.code}"
                    searchConditionName="#{functionalPermissionBean.roleSearchRequest.name}"
                    searchConditionEnable="#{functionalPermissionBean.roleSearchRequest.enable}"
                    panelGroupRendered="#{functionalPermissionBean.relationType == 'ROLE'}"
                    lazyDataModel="#{functionalPermissionBean.roleLazyDataModel}"
                    relateActionListener="#{functionalPermissionBean.onRelateRole(role.id)}"
                    unrelateActionListener="#{functionalPermissionBean.onUnrelateRole(role.id)}"
                    relateButtonRendered="#{!role.relatedFunctionalPermission}"
                    unrelateButtonRendered="#{role.relatedFunctionalPermission}"/>
        </h:form>
    </ui:define>
</ui:composition>
